<template>
  <div class="backtop" @click="toTop" v-if="btnFlag">
    <img src="@assets/img/common/top.png" alt="" />
  </div>
</template>

<script>
export default {
  name: "BackTop",
  data() {
    return {};
  },
  props: {
    btnFlag: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  /* 组件挂载时 */
  // mounted() {
  /* 监听window对象的滚动事件scroll */
  // window.addEventListener("scroll", this.scrollHander);
  // },
  // destroyed() {
  //   // window.removeEventListener("scroll", this.scrollToTop);
  //   console.log("destory");
  // },
  methods: {
    /* 回到顶部动画 */
    toTop() {
      // console.log(window.scrollY);
      /* 设置定时器，通过修改document.documentElement.scrollTop属性来改变内容区顶部隐藏的像素，也就是滚动尺寸
        当speed为0时就清除定时器
      */
      let timer = setInterval(() => {
        const speed = Math.floor(window.scrollY / 7);
        // console.log(speed);
        // console.log(window.scrollY);
        document.documentElement.scrollTop = window.scrollY - speed;
        if (speed === 0) {
          clearInterval(timer);
        }
      }, 16);
    },
    //回到顶部的展示与不展示
    // scrollHander() {
    //   // const that = this;
    //   // console.log(window.scrollY);
    //   if (window.scrollY > 200) {
    //     this.btnFlag = true;
    //   } else {
    //     this.btnFlag = false;
    //   }
    // },
  },
};
</script>

<style>
.backtop {
  position: fixed;
  right: 8px;
  bottom: 55px;
}
.backtop img {
  width: 43px;
  height: 43px;
}
</style>